<template>
  <div class="layout layout-content-box">
    <el-card class="box-card" v-loading="loading" element-loading-text="拼命加载中" element-loading-background="rgba(205, 205, 205, 0.6)">
      <div slot="header" class="clearfix">
        <span style="float:left;">书籍列表</span>
      </div>
      <!------筛选容器start-------->
      <el-card class="box-card filter-box-card" :body-style="{'padding':'15px 20px'}">
        <el-form :inline="true" :model="filterForm" class="custom-filter-box">
          <el-form-item style="margin-right:40px;">
            <a href="/book/create"><el-button type="text" size="small">添加新书籍</el-button></a>
          </el-form-item>
          <el-form-item label="书籍分类">
            <el-select v-model="filterForm.region" placeholder="书籍分类"  size="small" clearable>
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建日期">
             <el-date-picker v-model="filterForm.createTime" type="date"  size="small" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="select(filterForm.keyword)">筛选</el-button>
          </el-form-item>
          <el-form-item label="关键词">
            <el-input v-model.trim="filterForm.keyword"  @keyup.enter.native="search(filterForm.keyword)" size="small" placeholder="请输入关键词" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="search(filterForm.keyword)">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <!------筛选容器end-------->
      <!------列表容器start-------->
      <el-table :data="tableData" stripe border  align="center">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="书籍名称" min-width="120px">
          <template slot-scope="scope">
            <router-link :to="{path: '/book/'+scope.row.id}"> {{scope.row.title}}</router-link>
          </template>
        </el-table-column>
        <el-table-column label="书籍简介" min-width="280px" max-width="400px">
          <template slot-scope="scope">
            <div>{{(scope.row.description||'').substring(0,96)||''}}</div>
          </template>
        </el-table-column>
        <el-table-column label="作者" width="150px">
          <template slot-scope="scope">
            <a href="/author/1">{{ scope.row.author }}</a>
          </template>
        </el-table-column>
        <el-table-column label="出版社" prop="press" width="240px">
        </el-table-column>
        <el-table-column label="创建日期" width="180"  align="center">
          <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="更新日期" width="180"  align="center">
          <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template  slot-scope="scope">
            <el-button type="primary" size="small">编辑</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!------列表容器end-------->
      <!------列表操作start-------->
      <el-row type="flex" class="row-bg" justify="space-between" style="padding:20px 0;">
        <!---批量操作start---->
        <el-col :span="6">
           <el-dropdown>
            <el-button size="small" type="primary">
              批量操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item>双皮奶</el-dropdown-item>
              <el-dropdown-item>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <!---批量操作end---->
        <el-col :span="8">
            <div align="right">
              <el-pagination background
                layout="prev, pager, next,jumper"
                :total="total">
              </el-pagination>
            </div>
        </el-col>
      </el-row>
      <!------列表操作end-------->
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading:true,
      filterForm:{
        keyword:'',
      },
      tableData: [],
      total:0,
    };
  },
  methods: {
    /**
    *@method  init 初始化操作
    *@augments
    *@returns
     */
    init(){
      this.getListData();
    },
    /**
    *@method  init 初始化操作
    *@augments
    *@returns
     */
    getListData(page=1){
      this.axios.get('/dash/book').then(
        response => {
          //更新list table数据
          var _DATA = response.data;

          this.tableData=_DATA.data;
          this.total=_DATA.count;

          //成功后隐藏loading
          this.loading=false;
        },
        err => {
          //隐藏loading
          this.loading=false;
          console.error("catch error:", err);
        }
      );
    },
     /**
    * @method select 搜索
    * @argument key 关键词
     */
    select(key){
      if(key!==''){
         this.axios.get('/dash/book/search?keyword='+key).then(
          response => {
            //更新list table数据
            var _DATA = response.data;

            this.tableData=_DATA.data;

          },
          err => {
            console.error("catch error:", err);
          }
        );
      }
    },
    /**
    * @method search 搜索
    * @argument key 关键词
     */
    search(key){
      if(key!==''){
         this.axios.get('/dash/book/search?keyword='+key).then(
          response => {
            //更新list table数据
            var _DATA = response.data;

            this.tableData=_DATA.data;

          },
          err => {
            console.error("catch error:", err);
          }
        );
      }
    },
  },
  mounted(){
    this.init();
  }
};
</script>

